import React, { Component } from 'react'
import {
	Text, View, TouchableOpacity
} from "react-native";
import { SpaceBetween } from '../../../create/_components/SpaceBetween.js';
import { CURRENCY } from '../../../../../utils/helper';
import MethodUtil from '../../../../../utils/MethodUtil';
import { styles } from '../../_common/style';
import { LightBox } from '../../../../../component/Store';
//费用预算
export class FeeSection extends Component {
	constructor(props) {
		super(props);
		this.state = {
			loaded: false
		}

		this._closeLightBox = this._closeLightBox.bind(this);
		this.lightBoxData = {
			onClosePress: this._closeLightBox,
			modalVisible: false,
			title: '',
			rowDataList: [],
		};
	}

	_closeLightBox () {
		this.lightBoxData.modalVisible = false;
		const { lightBoxVisible } = this.state;
		this.setState({
			lightBoxVisible: !lightBoxVisible,
		});
	}

	//预算估计费用
	_didPressShowBudgetLightBox (orderFeeVOS, unit) {
		this.lightBoxData.modalVisible = true;
		this.lightBoxData.title = '费用估算';
		this.lightBoxData.rowDataList = orderFeeVOS.map((item, index) => {
			return { label: item.feeTypeName + '：', val: unit.label + MethodUtil.toThousands(item.feeAmt || 0, 2) + unit.text }
		});

		const { lightBoxVisible } = this.state;
		this.setState({
			lightBoxVisible: !lightBoxVisible
		});
	}

	render () {
		const { data, currency, otherCost } = this.props;
		if (data && data.length) {
			return (
				<View style={[styles.itemBox, styles.borders]}>
					<Text style={styles.itemTitle}>费用估算</Text>
					<TouchableOpacity activeOpacity={0.5} onPress={() => { this._didPressShowBudgetLightBox(data, CURRENCY.getUnit(currency)) }} style={styles.budget}>
						<SpaceBetween iconShow={true} fontLeft={{ title: '总价' }} fontRight={{ title: CURRENCY.getUnit(currency).label + MethodUtil.toThousands((otherCost || 0), 2) + CURRENCY.getUnit(currency).text }} />
					</TouchableOpacity>
					<LightBox {...this.lightBoxData} />
				</View>
			)
		} else {
			return null;
		}
	}
}
